<!-- <template>
  <div>
    <my-table :rows="rows" :fields="fields">
      <template #cell(key)="{ index }">
        {{ index + 1 }}
      </template>
      <template #cell(row)="{ item }">
        <code v-text="JSON.stringify(item, null, 2)" :style="{
          whiteSpace: 'pre-wrap',
          textAlign: 'left',
          display: 'block',
          paddingLeft: '3rem'
        }"></code>
      </template>
      <template #cell(fname)="{ value }">
        <span style="color: red;" v-text="value"></span>
      </template>
      <template #header(fname)="{ label }">
        <span style="color: blue;" v-text="label"></span>
      </template>
      <template #header="{ label }">
        <span style="font-style: italic;" v-text="label"></span>
      </template>
    </my-table>
  </div>
</template>
<script>
import MyTable from './MyTable.vue';

export default {
  components: {
    MyTable
  },
  data: () => ({
    rows: [
      { fname: 'Jhon', lname: 'Smith' },
      { fname: 'Arthur', lname: 'Cromer' }
    ],
    fields: [
      { key: 'keys', label: '#' },
      { key: 'fname', label: 'First name' },
      { key: 'lname', label: 'Last name' },
      { key: 'row', label: 'Raw data' }
    ]
  })
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

table {
  width: 100%;
}
</style>


<!-- <template>
  <Table :rows="rows" :fields="fields">
    <template #cell(key)="{ index }">
      {{ index + 1 }}
    </template>
    <template #cell(row)="{ item }">
      <code v-text="JSON.stringify(item, null, 2)" :style="{
        whiteSpace: 'pre-wrap',
        textAlign: 'left',
        display: 'block',
        paddingLeft: '3rem'
      }" />
    </template>
    <template #cell(fname)="{ value }">
      <span style="color: red" v-text="value" />
    </template>
    <template #header(fname)="{ label }">
      <span style="color: blue" v-text="label" />
    </template>
    <template #header="{ label }">
      <span style="font-style: italic;" v-text="label" />
    </template>
  </Table>
</template>
<script lang="ts">
import Table from './MyTable.vue';
import { defineComponent } from 'vue';
export default defineComponent({
  components: { Table },
  setup: () => ({
    rows: [
      { fname: 'John', lname: 'Smith' },
      { fname: 'Arthur', lname: 'Cromer' }
    ],
    fields: [
      { key: 'key', label: '#' },
      { key: 'fname', label: 'First name' },
      { key: 'lname', label: 'Last name' },
      { key: 'row', label: 'Raw data' }
    ]
  })
})
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

table {
  width: 100%;
}
</style> --> -->

<template>
  <Table :rows="rows" :fields="fields">
    <template #cell(key)="{ index }">
      {{ index + 1 }}
    </template>
    <template #cell(fname)="{ value }">
      <span style="color: red" v-text="value" />
    </template>
    <template #header(fname)="{ label }">
      <span style="color: blue" v-text="label" />
    </template>
    <template #header="{ label }">
      <span style="font-style: italic;" v-text="label" />
    </template>
    <template #cell(row)="{ item }">
      <code v-text="JSON.stringify(item, null, 2)" :style="{
        whiteSpace: 'pre-wrap',
        textAlign: 'left',
        display: 'block',
        paddingLeft: '3rem'
      }" />
    </template>
  </Table>
</template>
<script lang="ts">
import Table from './MyTable.vue';
import { defineComponent } from 'vue';
export default defineComponent({
  components: { Table },
  setup: () => ({
    rows: [
      { fname: 'John', lname: 'Smith' },
      { fname: 'Arthur', lname: 'Cromer' }
    ],
    fields: [
      { key: 'key', label: '#' },
      { key: 'fname', label: 'First name' },
      { key: 'lname', label: 'Last name' },
      { key: 'row', label: 'Raw data' }
    ]
  })
})
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

table {
  width: 100%;
}
</style>
